<template>
	<view class="cards-container">
		<!-- 积分卡头部信息 -->
		<view class="cards-header">
			<view class="cards-info">
				<text class="cards-title">我的积分卡</text>
				<text class="cards-desc">收集积分卡，兑换心仪商品</text>
			</view>
			<view class="cards-rules" @click="showRules">
				<text class="rules-text">卡片规则</text>
				<text class="rules-icon">?</text>
			</view>
		</view>

		<!-- 积分卡统计 -->
		<view class="cards-summary">
			<view class="summary-item">
				<text class="summary-value">{{ userExtInfo.pointsCards }}</text>
				<text class="summary-label">总卡片数</text>
			</view>
			<view class="summary-item">
				<text class="summary-value">{{ cardTypes.length }}</text>
				<text class="summary-label">卡片种类</text>
			</view>
			<view class="summary-item">
				<text class="summary-value">{{ getHighestCard() }}</text>
				<text class="summary-label">最高等级</text>
			</view>
		</view>

		<!-- 积分卡列表 -->
		<view class="cards-list">
			<view class="card-item" v-for="(card, index) in cardTypes" :key="index" :class="card.level">
				<view class="card-left">
					<view class="card-icon" :class="card.level">
						<text class="card-level">{{ card.level }}</text>
					</view>
					<view class="card-info">
						<text class="card-name">{{ card.name }}</text>
						<text class="card-desc">{{ card.description }}</text>
					</view>
				</view>
				<view class="card-right">
					<text class="card-count">{{ userCards[card.level] || 0 }}</text>
					<text class="card-unit">张</text>
				</view>
			</view>
		</view>

		<!-- 获取积分卡方式 -->
		<view class="get-cards-section">
			<view class="section-title">
				<text class="title-text">如何获得积分卡</text>
			</view>
			<view class="get-ways">
				<view class="way-item">
					<view class="way-icon">📦</view>
					<view class="way-content">
						<text class="way-title">购物获得</text>
						<text class="way-desc">收货后扫码领积分卡（盲盒集卡）</text>
					</view>
				</view>
				<view class="way-item">
					<view class="way-icon">�</view>
					<view class="way-content">
						<text class="way-title">消费奖励</text>
						<text class="way-desc">购买商品后随机获得积分卡</text>
					</view>
				</view>
				<view class="way-item">
					<view class="way-icon">🎯</view>
					<view class="way-content">
						<text class="way-title">订单完成</text>
						<text class="way-desc">确认收货后有机会获得积分卡</text>
					</view>
				</view>
				<view class="way-item">
					<view class="way-icon">�</view>
					<view class="way-content">
						<text class="way-title">盲盒惊喜</text>
						<text class="way-desc">每次购物都有机会开出稀有卡片</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 积分卡记录入口 -->
		<view class="cards-record" @click="toCardsRecord">
			<text class="record-text">查看积分卡记录</text>
			<text class="record-arrow">></text>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				// 用户扩展信息（非登录相关）
				userExtInfo: {
					pointsCards: 0,
					cardsList: []
				},
				userCards: {
					S: 0,
					A: 0,
					B: 0,
					C: 0,
					D: 0
				},
				// 积分卡类型定义
				cardTypes: [{
						level: 'S',
						name: 'S级积分卡',
						description: '最高等级，稀有珍贵',
						color: '#ff6b35'
					},
					{
						level: 'A',
						name: 'A级积分卡',
						description: '高级卡片，价值很高',
						color: '#52a58a'
					},
					{
						level: 'B',
						name: 'B级积分卡',
						description: '中高级卡片，较为珍贵',
						color: '#3498db'
					},
					{
						level: 'C',
						name: 'C级积分卡',
						description: '中级卡片，比较常见',
						color: '#9b59b6'
					},
					{
						level: 'D',
						name: 'D级积分卡',
						description: '基础卡片，容易获得',
						color: '#95a5a6'
					}
				]
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onShow() {
			this.loadUserExtInfo();
		},
		methods: {
			loadUserExtInfo() {
				this.$api.user.GetUserExtInfo2().then(res => {
					this.userExtInfo = {
						pointsCards: res.data.pointsCards,
						cardsList: res.data.cardsList
					}
					if (res.data.cardsList) {
						res.data.cardsList.forEach(item => {
							this.userCards[item.scorecard] = item.sy_points
						})
					}
				})
			},

			// 获取最高等级卡片
			getHighestCard() {
				const levels = ['S', 'A', 'B', 'C', 'D']
				for (let level of levels) {
					if (this.userCards[level] > 0) {
						return level + '级'
					}
				}
				return '无'
			},
			// 查看积分卡记录
			toCardsRecord() {
				uni.navigateTo({
					url: '/points-package/record/points-cards-record'
				})
			},
			// 显示积分卡规则
			showRules() {
				uni.navigateTo({
					url: '/points-package/rules/points-rules'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cards-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 160rpx;
	}

	/* 积分卡头部 */
	.cards-header {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		padding: 60rpx 30rpx 40rpx;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cards-info {
		flex: 1;
	}

	.cards-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.cards-desc {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.cards-rules {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.2);
		padding: 12rpx 20rpx;
		border-radius: 30rpx;
	}

	.rules-text {
		font-size: 24rpx;
		margin-right: 8rpx;
	}

	.rules-icon {
		font-size: 20rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 积分卡统计 */
	.cards-summary {
		background-color: white;
		display: flex;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.summary-item {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.summary-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #52a58a;
		margin-bottom: 8rpx;
	}

	.summary-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 积分卡列表 */
	.cards-list {
		background-color: white;
		margin: 0 30rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.card-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.card-item:last-child {
		border-bottom: none;
	}

	.card-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.card-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-weight: bold;
		color: white;
	}

	.card-icon.S {
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
	}

	.card-icon.A {
		background: linear-gradient(135deg, #52a58a, #6bb6a3);
	}

	.card-icon.B {
		background: linear-gradient(135deg, #3498db, #5dade2);
	}

	.card-icon.C {
		background: linear-gradient(135deg, #9b59b6, #bb6bd9);
	}

	.card-icon.D {
		background: linear-gradient(135deg, #95a5a6, #bdc3c7);
	}

	.card-level {
		font-size: 32rpx;
		font-weight: bold;
	}

	.card-info {
		flex: 1;
	}

	.card-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
		font-weight: bold;
	}

	.card-desc {
		font-size: 24rpx;
		color: #666;
	}

	.card-right {
		text-align: right;
		display: flex;
		align-items: baseline;
	}

	.card-count {
		font-size: 36rpx;
		font-weight: bold;
		color: #52a58a;
	}

	.card-unit {
		font-size: 24rpx;
		color: #666;
		margin-left: 4rpx;
	}

	/* 获取方式 */
	.get-cards-section {
		background-color: white;
		margin: 0 30rpx 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.get-ways {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.way-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.way-icon {
		font-size: 32rpx;
		margin-right: 16rpx;
	}

	.way-content {
		flex: 1;
	}

	.way-title {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 4rpx;
		display: block;
		font-weight: bold;
	}

	.way-desc {
		font-size: 22rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 积分卡记录入口 */
	.cards-record {
		background-color: white;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.record-text {
		font-size: 28rpx;
		color: #333;
	}

	.record-arrow {
		font-size: 24rpx;
		color: #999;
	}
</style>